<template>
  <a-drawer v-model:visible="visible" title="编辑决策信息" placement="right" :width="500">
    <a-form ref="decisionForm" :model="model" :rules="rules" :label-col="{ span: 8 }" @finish="onFinish">
      <a-form-item label="站点编码" name="stationCode">
        <a-select v-model:value="model.stationCode" placeholder="请选择站点编码" disabled>
          <a-select-option value="">请选择</a-select-option>
          <template v-for="(vo, index) in stationList" :key="index">
            <a-select-option :value="vo.stationCode">
              {{ vo.name }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="报警内容" name="alarmText">
        <a-textarea v-model:value="model.alarmText" placeholder="请输入报警内容" :rows="5" />
      </a-form-item>
      <a-form-item label="报警类型" name="alarmType">
        <JDictSelectTag v-model:value="model.alarmType" placeholder="请选择报警等级" dictCode="decision_alarm_type" allowClear />
      </a-form-item>
      <a-form-item label="报警等级" name="alarmLevel">
        <JDictSelectTag v-model:value="model.alarmLevel" placeholder="请选择报警等级" dictCode="alarm_level" allowClear />
      </a-form-item>
      <a-form-item label="设备类型" name="equipmentType">
        <JDictSelectTag type="select" v-model:value="model.equipmentType" dictCode="equipment_type" placeholder="请选择设备类型" allowClear />
      </a-form-item>
      <a-form-item label="设备字段" name="equipmentField">
        <a-select v-model:value="model.equipmentField" placeholder="请选择设备字段">
          <a-select-option value="">请选择</a-select-option>
          <template v-for="vo in equipmentFieldLists" :key="vo">
            <a-select-option :value="vo">{{ vo }}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="触发条件操作符" name="alarmOperator">
        <a-select v-model:value="model.alarmOperator" placeholder="请输入触发条件操作符">
          <a-select-option value=">">大于</a-select-option>
          <a-select-option value="<">小于</a-select-option>
          <a-select-option value="=">等于</a-select-option>
          <a-select-option value="<=">小于等于</a-select-option>
          <a-select-option value=">=">大于等于</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="触发条件操作符" name="alarmValue">
        <a-input v-model:value="model.alarmValue" placeholder="请输入触发条件比较值" />
      </a-form-item>
      <a-form-item label="解除报警条件操作符" name="disalarmOperator">
        <a-select v-model:value="model.disalarmOperator" placeholder="请输入解除报警条件操作符">
          <a-select-option value=">">大于</a-select-option>
          <a-select-option value="<">小于</a-select-option>
          <a-select-option value="=">等于</a-select-option>
          <a-select-option value="<=">小于等于</a-select-option>
          <a-select-option value=">=">大于等于</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="解除报警条件比较值" name="disalarmValue">
        <a-input v-model:value="model.disalarmValue" placeholder="请输入解除报警条件比较值" />
      </a-form-item>
      <a-form-item label="操作">
        <a-button @click="resetForm">重置</a-button>
        <a-divider type="vertical" />
        <a-button type="primary" html-type="submit">提交保存</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script>
import { watch, reactive, ref, getCurrentInstance, defineComponent } from 'vue';
import { equipmentListApi } from '/@/api/equipment/index';
import { JDictSelectTag } from '/@/components/Form';
import { useUserStore } from '/@/store/modules/user';
import { plcHeadersApi } from '/@/api/plc/index';
import { decisionAddApi, decisionModifyApi } from '/@/api/decision/index';
export default defineComponent({
  components: { JDictSelectTag },
  emits: ['oks'],
  setup(props, { emit }) {
    const userStore = useUserStore();

    let { proxy } = getCurrentInstance();

    let visible = ref(false);

    let loading = ref(false);

    // 站点列表
    let stationList = ref(userStore.getStationList);

    // 设备字段
    let equipmentFieldLists = ref([]);

    let model = ref({
      // 告警等级
      alarmLevel: '',
      // 报警内容
      alarmText: '',
      // 报警类型
      alarmType: '',
      // 设备字段
      equipmentField: '',
      // 设备类型
      equipmentType: '',
      // 站点编码
      stationCode: '',
      // 触发条件操作符
      alarmOperator: '',
      // 触发条件比较值
      alarmValue: '',
      // 解除报警条件操作符
      disalarmOperator: '',
      // 解除报警条件比较值
      disalarmValue: '',
    });

    let rules = ref({
      stationCode: [{ required: true, message: '请选择站点编码' }],
      alarmText: [{ required: true, message: '请输入报警内容' }],
      alarmType: [{ required: true, message: '请选择报警类型' }],
      alarmLevel: [{ required: true, message: '请输入报警等级' }],
      equipmentType: [{ required: true, message: '请选择设备类型' }],
      equipmentField: [{ required: true, message: '请选择设备字段' }],
    });

    watch(
      () => visible.value,
      (flag) => {
        if (!flag) {
          proxy.$refs.decisionForm.resetFields();
          delete model.value.id;
        }
      }
    );

    watch(
      () => model.value.stationCode,
      (stationCode) => {
        if (stationCode) {
          initPlcHeaders(stationCode);
        }
      },
      { immediate: true }
    );

    function onInit(data) {
      data['alarmType'] = data['alarmType'] + '';
      data['alarmLevel'] = data['alarmLevel'] + '';
      data['equipmentType'] = data['equipmentType'] + '';
      model.value = {
        ...data,
      };
    }

    /**
     * 获取决策信息头
     */
    function initPlcHeaders(stationCode) {
      plcHeadersApi({ stationCode }).then((res) => {
        equipmentFieldLists.value = res;
      });
    }

    function resetForm() {
      proxy.$refs.decisionForm.resetFields();
    }

    /**
     * 决策信息编辑
     */
    function onFinish() {
      let data = {
        ...model.value,
      };
      loading.value = true;
      if (!data['id']) {
        decisionAddApi(data).then((res) => {
          loading.value = false;
          if (res) {
            visible.value = false;
            proxy.$refs.decisionForm.resetFields();
            emit('oks');
          }
        });
      } else {
        decisionModifyApi(data).then((res) => {
          loading.value = false;
          if (res) {
            visible.value = false;
            proxy.$refs.decisionForm.resetFields();
            emit('oks');
          }
        });
      }
    }

    return {
      loading,
      visible,
      model,
      rules,
      stationList,
      equipmentFieldLists,
      resetForm,
      onFinish,
      onInit,
    };
  },
});
</script>